<template>
    <div class="studentList">
<!-- 查询 -->
 <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
  <el-form-item label="姓名">
    <el-input v-model="formInline.name" placeholder="请输入姓名查询"></el-input>
  </el-form-item>
  <el-form-item>
   <el-button type="primary" @click="find">查询</el-button>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="reset">重置</el-button>
  </el-form-item>
</el-form>

        

        <el-table :data="tableData.slice((currentPage -1) *pageSize, currentPage *pageSize)"  style="width: 100%">
     
      
         <el-table-column prop="name" label="姓名" align="center"></el-table-column>
         <el-table-column prop="sex" label="性别" align="center"></el-table-column>
         <el-table-column prop="age" label="年龄" align="center"></el-table-column>
         <el-table-column prop="class" label="班级" align="center"></el-table-column>
         <el-table-column prop="state_text" label="状态" align="center"></el-table-column>
         <el-table-column prop="numbar" label="学号" align="center"></el-table-column>
         <el-table-column prop="phone" label="联系方式" align="center"></el-table-column>
         <el-table-column prop="address" label="地址" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
        <template slot-scope="scope">
            <div>
                
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="Del(scope.row)">删除</el-button>
            </div>
        </template>


    </el-table-column>
 
    </el-table>

     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    </div>
</template>
<script>
import { studentsAPI }  from '@/api/api.js';
import { studentDelAPI }  from '@/api/api.js';
export default {
    // 解释一下因为这个接口不通所以我的数据是写死的，正常就是一个空数据哦数据通过渲染出来
    data() {
          return {
            currentPage: 1,//当前页
            pageSize:10,//每页显示页数
            total:0,//总数
            formInline: {
                name:''
            },
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '猪猪',
            address: '广西百色市'
          }, {
            date: '2016-05-01',
            name: '琳琳',
            address: '四川成都'
          }, {
            date: '2016-05-03',
            name: '小屁屁',
            address: '江西南昌'
          }]
        }
    },
    // created() {
    //     this.getData();
    // },
    // computed: {
    //     // compData() {
    //     //     // return this.tableData.slice((this.currentPage -1) *this.pageSize, this.currentPage * this.pageSize)
    //     // }
    // },
    methods: {
        find() {
           console.log(this.formInline);
           this.getData(this.formInline);
           
        },
        reset() {
            console.log(this.formInline);
            this.formInline = {};
            this.getData(this.formInline);
            
            
        },

        handleSizeChange(val) {
            this.pageSize = val;
            this.currentPage=1;
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
      },
getData(params) {
    studentsAPI(params).then((res) => {
        console.log(res);
        if(res.data.status == 200) {
            this.tableData=res.data.data
            this.tableData.forEach(item => {
                item.sex === 1 ? item.sex_text = '男' : item.sex_text = '女';
                item.state === "1" 
                ? (item.state_text = "已入学") 
                : item.state ==="2" 
                ? (item.state_text = "未入学") 
                : (item.state_text = "休学中")
            })
        }
        
    })
},
Del(row) {

    // 删除操作
    console.log(row);
    studentDelAPI(row.id).then(res => {
        console.log(res);
        if(res.data.status == 200) {
            this.$message({message:'数据删除成功',type:'success'})
            this.getData()
        }
        
    })
    

}

    }
}


</script>

<style lang="scss">
.studentList {
    .el-form-item , .demo-form-inline {
        text-align: left;

}
    .el-pagination {
        text-align: left;
        margin-top: 20px;
    }
}

</style>